<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
    </style>
    <title>sys-shim page</title>
    <script type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/rpc-websockets@7.6.0/dist/index.browser-bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
  </head>
  <body>
    <div id="box">
      <h2>sys-shim</h2>
      <button @click="msgBox">msgBox</button>
      <button @click="exit">exit</button>
      <button @click="exitHwnd">exitHwnd {{ hwnd }}</button>
    </div>
  </body>
  <script>
    let ws
    let main
    let tray
    let hwnd
    let msg
    window.vm = new Vue({
      el: `#box`,
      data: {
        hwnd: ``,
      },
      async created() {
        hwnd = window.hwnd = await window.ext.hwnd
        ws = window.ws = new RPCWebSocket.Client(await window.ext.wsUrl)
        main = window.main = await new Sys(ws)
        await ws.call(`forms.callFn`, [`${hwnd}.show`])
        await ws.call(`view.setIcon`, [hwnd, `https://www.baidu.com/favicon.ico`])
        msg = window.msg = await new main.Msg()
        tray = window.tray = await new main.Tray()
        this.hwnd = tray.hwnd
        await tray.icon(`https://www.hongqiye.com/favicon.ico`)
        await ws.call(`forms.setVal`, [`${tray.hwnd}.tray.tip`, `tiptiptip`])
        await ws.call(`forms.callFn`, [`${tray.hwnd}.tray.pop`, `traytray`, `msgmsgmsg`, 1])
        tray.on(`_WM_RBUTTONUP`, async (arg) => {
          const [, {bottom, right}] = await ws.call(`win.callFn`, [`getClientRect`, hwnd])
          const [, x, y] = await ws.call(`mouse.callFn`, [`getPos`])
          console.log(`_WM_RBUTTONUP`, {
            bottom,
            right,
            x,
            y,
          })
          const [newX, newY] = [x - right, y - bottom]
          console.log({newX, newY})
          await ws.call(`forms.callFn`, [`${hwnd}.show`])
          await ws.call(`forms.callFn`, [`${hwnd}.setPos`, newX, newY])
          await ws.call(`win.callFn`, [`setActive`, hwnd])
          await ws.call(`win.callFn`, [`setForeground`, hwnd])
          await ws.call(`win.callFn`, [`setFocus`, hwnd])
          await ws.call(`win.callFn`, [`setTopmost`, hwnd, true])
          await ws.call(`forms.callFn`, [`${hwnd}.wb.focus`])
        })
        tray.on(`_WM_LBUTTONUP`, () => {
          console.log(`_WM_LBUTTONUP`, )
        })
        msg.on(`hello`, (...arg) => {
          console.log(`hello`, ...arg)
        })
        msg.emit(`hello`, `ace`)
        window.addEventListener('blur', async () => {
          document.body.append(`blur`)
          await ws.call(`win.callFn`, [`setTopmost`, hwnd, false])
        });
        window.addEventListener('focus', function() {
          document.body.append(`focus`)
        });
      },
      methods: {
        msgBox () {
          main.msgBox(`hello`, `title`)
        },
        exit () {
          main.exit()
        },
        exitHwnd () {
          tray.exit()
        },
      },
    });
  </script>
</html>
